<template>
    
    <div style="float: left; margin-top: 10px; margin-left: 16px;width: 150px;">
        <el-text size="large">id：</el-text>
        <el-input class="input2" v-model="textParm.textId" @change="getTextList" :placeholder="$t('problemView.searchInput')" />
    </div>

    <div style="float: left; margin-top: 25px;"><el-text size="large">{{ $t('textView.textName') }}</el-text></div>
    <el-input class="input" v-model="textParm.textName" @change="getTextList" :placeholder="$t('problemView.searchInput')"  />

    <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 20px;">
        <el-button class="buttom"> {{ $t('textView.status') }}<el-icon><ArrowDown /></el-icon></el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="textParm.status='',getTextList('')">{{ $t('enum.all') }}</el-dropdown-item>
                <el-dropdown-item @click="textParm.status='1',getTextList('')">{{ $t('textView.status1') }}</el-dropdown-item>
                <el-dropdown-item @click="textParm.status='2',getTextList('')">{{ $t('textView.status2') }}</el-dropdown-item>
                <el-dropdown-item @click="textParm.status='3',getTextList('')">{{ $t('textView.status3') }}</el-dropdown-item>
                <el-dropdown-item @click="textParm.status='4',getTextList('')">{{ $t('textView.status4') }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>


    <el-table :data="testList" >
        <el-table-column prop="id" label="id" width="100" />
        <el-table-column prop="testName" :label=" $t('textView.textName')" width="350" />
        <el-table-column prop="score" :label=" $t('textView.score')"  width="100" />
        <el-table-column prop="status" :label=" $t('textView.status')" width="100">
            <template #default="scope">  
                <el-tag v-if="scope.row.status===4" type="danger">{{ $t('textView.status4') }}</el-tag> 
                <el-tag v-else-if="scope.row.status===1" type="primary">{{ $t('textView.status1') }}</el-tag>   
                <el-tag v-else-if="scope.row.status===3" type="info">{{$t('textView.status3')}}</el-tag> 
                <el-tag v-else type="warning">{{$t('textView.status2')}}</el-tag>
                
                
            </template> 
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('textView.createTime')" width="200" />
        <el-table-column prop="time" :label="$t('textView.time')" width="100" >
            <template #default="scope">  
                <span>{{ scope.row.time}}{{ $t('textView.a2') }}</span>  
            </template> 
        </el-table-column>

        <el-table-column >
            <template #default="scope">  
                <el-popconfirm :title="$t('textView.tips2')" width="200" @confirm="reSubmit(scope.row.id)">
                    <template #reference>
                        <el-button link type="danger" :disabled="scope.row.remainingCount<=0 || scope.row.status<=2">{{ $t('textView.resubmit') }}({{scope.row.remainingCount}})</el-button>
                    </template>
                </el-popconfirm>
            </template> 
        </el-table-column>


        <el-table-column>
            <template #default="scope">  
                <el-button link type="primary" :disabled="scope.row.status!==1"  @click="$router.push(`/testing/${scope.row.id}`)">{{ $t('textView.joinTest') }}</el-button>
            </template> 

        </el-table-column>
    </el-table>

</template>


<script setup lang="ts">
    import useTest from '@/hooks/useTest';
    import { onMounted } from 'vue';
    const {textParm,testList,getTextList,reSubmit}=useTest()


    onMounted(()=>{getTextList('')})
</script>


<style scoped>
    .input2{
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 70%;
        height: 30px;
    }

    .input{
        margin-top: 20px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 20%;
    }

</style>